<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/30
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<head>
    <title>教师信息管理</title>
</head>
<body>
<div>
    <button class="button" onclick="addTeacher()">新增教师</button><br>
</div>
<div class="margin">
    <button class="button" onclick="addTeacher()">新增教师</button><br>
    <table class="table">
        <thead>
        <tr>
            <td>ID</td>
            <td>教师姓名</td>
            <td>教师性别</td>
            <td>教师电话</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>
<%--分页--%>
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" selected="selected">2</option>
    <option value="5">5</option>
    <option value="10">10</option>
</select>条数据，当前是第<span id="currentPageSpan" onchange="onChange()"></span> 页，
    总共<span id="totalPageSpan" onchange="Allpage()"></span> 页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>
</div>
<%--一个编辑教师信息的模态框--%>
<div class="modal" id="editModal">
    <%--编辑模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>编辑教师信息</h4>
            </div>
            <div class="modal-body">
                <%--<label class="control-label">教室ID</label>
                <input class="form-control" type="text" id="idInput" placeholder="请输入教室ID">--%>
                    <label class="control-label">教师姓名</label>
                <input class="form-control" type="text" id="nameInput" placeholder="请输入教师姓名">

                    <label class="control-label">教师性别</label>
                    <select id="sexSelect" class="form-control"><option value="0">男</option>
                        <option value="1">女</option> </select>

                    <label class="control-label">教师电话</label>
                    <input class="form-control" type="text" id="phoneInput" placeholder="请输入教师电话">
                    <input type="hidden" id="idInput">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    //当前页
    var currentPage = 1;
    //每页记录个数
    var pageSize = 2;
    //总共有多少页
    var totalPage ;

    $(function () {
        //loadList();
        loadListByPage();
    });
    //用户修改的每页展示个数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        loadListByPage();
        currentPage = 1;
    }
    function Allpage() {
        pageSize = $("#currentPageSpan").val();
        loadListByPage();
    }
    //当前第几页
    function onChange() {
        totalPage = $("#currentPageSpan").val()
    }
    //首页回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }
    /*上一页的回调方法*/
    function prePage() {
        currentPage --;
        if (currentPage < 1){
            currentPage = 1;
        }
        loadListByPage();
    }
    //下一页回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage){
            currentPage = totalPage;
        }
        loadListByPage();
    }
    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }
    //
    function showTeacher(teacherList) {
        var html ='';
        for (var i=0;i<teacherList.length;i++){
            var item = teacherList[i];
            console.log(JSON.stringify(item));
            html+="<tr>";
            html+="<td>"+item.id+"</td>";
            html+="<td>"+item.name+"</td>";
            if (item.sex == 1){
                html+="<td>女</td>";
            }else {
                html+="<td>男</td>";
            }
            html+="<td>"+item.phone+"</td>";

            html+="<td><button class='button' onclick='getTeacherDetail(\"" + item.id + "\")'>编辑</button>"+
                "<button class='button' onclick='deleteOneTeacher(\"" + item.id + "\")' >删除</button></td>"
            html+"</tr>";
        }
        $("#tb").html(html);
    }
    //分页加载用户列表数据
    function loadListByPage() {
        $.ajax({
            url:"${pageContext.request.contextPath}/teacher/getListBypage" ,
            type:'get',
            data:{"currentPage":currentPage,"pageSize":pageSize},
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showTeacher(result.teacherList);//分页数据
                    totalPage = result.totalPage;//总共有多少页
                    $("#currentPageSpan").html(currentPage);
                    $("#totalPageSpan").html(totalPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }
    //加载教师数据
    function loadList() {
        $.ajax({
            url:"${pageContext.request.contextPath}/teacher/getteacher",
            type:'get',
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showTeacher(result.teacherList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }
    //添加教师
    function addTeacher() {
        showEditWindow();
    }
    //添加教师的模态框
    function showEditWindow(teacher) {
        if(teacher!=null){
            console.log(JSON.stringify(teacher));
            $("#idInput").val(teacher.id);
            $("#nameInput").val(teacher.name);
            $("#sexSelect").val(teacher.sex);
            $("#phoneInput").val(teacher.phone);

        }else {
            //数据全部归零
            $("#idInput").val(0);
            $("#nameInput").val("");
            $("#sexSelect").val(0);
            $("#phoneInput").val("");
        }
        $("#editModal").modal("show");
    }
    //确认按钮
    function editConfirm() {
        var idValue = $("#idInput").val();
        var nameValue = $("#nameInput").val();
        var sexValue = $("#sexSelect").val();
        var phoneVlaue = $("#phoneInput").val();
        var datesource = {id:idValue,name:nameValue,sex:sexValue, phone:phoneVlaue};
        $.ajax({
            url:"${pageContext.request.contextPath}/teacher/edit",
            type:'post',
            contentType:'application/x-www-form-urlencoded',
            data:datesource,
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    $("#editModal").modal("hide");
                    alert(result.message);
                    loadListByPage();
                }else {
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }
    //编辑教师信息
    function getTeacherDetail(id) {
      $.ajax({
         url:"${pageContext.request.contextPath}/teacher/getone",
         type:'get',
          data:{'id':id},
          dataType:'json',
          success:function (result) {
              if (result.code == 0){
                  showEditWindow(result.teacherList);
                  //alert(result.message);
              }else {
                  alert(result.message);
              }
          },
          err:function (err) {
             console.log(err);
          }
      });
    }
    function deleteOneTeacher(id) {
        $.ajax({
           url:"${pageContext.request.contextPath}/teacher/delete",
           type:'get',
           contentType: 'application/x-www-form-urlencoded',
           data:{"id":id},
           dataType:'json',
           success:function (result) {
               if (result.code == 0){
                   loadListByPage();
                   alert(result.message)
               }else {
                   alert(result.message);
               }
           } ,
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }
</script>
</body>
</html>
